<template>
    <div id="team">
        <div class="row">
            <div class="col-md-12">
                <condition @getTeamCondition="getCondition"></condition>
            </div>
        </div>        
        <div class="row">
            <div class="col-md-12">
                <el-table :data="teams" size="small" border style="width: 100%">
                    <el-table-column fixed align="center" prop="TeamId" label="编号" width="60"></el-table-column>
                    <el-table-column fixed align="center" prop="PassportNo" label="通行证号" width="130"></el-table-column>
                    <el-table-column fixed align="center" prop="Name" label="团队名称" width="120"></el-table-column>
                    <el-table-column align="center" label="领队姓名" width="150">
                        <template slot-scope="scope">
                            <user-detail :user="scope.row.Leader.User"></user-detail>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="团队成员">
                        <template slot-scope="scope">
                            <div v-for="(member, index) in scope.row.Members" style="display: inline;">
                                <user-detail :user="member.User"></user-detail>
                                <span v-if="index < scope.row.Members.length-1">, </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="MemberCount" label="团队人数" width="100"></el-table-column>
                    <el-table-column align="center" label="创建时间" width="150">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CreateTime | time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="100" v-if="authorize(['ROOT0'])">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" v-if="scope.row.State != -1" @click="remove(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>                 
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>
        </div>    
    </div>
</template>

<script>

import Condition from './condition.vue';
import UserDetail from 'views/user/user_detail.vue';
import {ShowSuccess, TimeFormat} from 'web/utils';

export default {
    components: {
        Condition,
        UserDetail
    },
    filters: {
        time: TimeFormat
    },
    data() {
        return {
            teams: [],
            pageCount: 0,
            pageSize: 10,
            condition: { }          
        }
    },
    methods: {
        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$PassportService.QueryTeams(this.condition, val, this.pageSize)
                .then(ret => {
                    this.teams = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.query(this.condition);
        },

        // 获取查询条件并进行查询
        getCondition(condition) {
            this.condition = condition;
            this.query(this.condition);
        },

        // 条件查询
        query(condition) {
            Promise.all([
                this.$PassportService.QueryTeamsCount(condition),
                this.$PassportService.QueryTeams(condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.teams = ret[1];
            });
        },   
        
        // 删除通行证
        remove(team) {
            // this.$confirm(`确定要删除通行证 ${passport.Name}(${passport.TeamNo}) 吗？`, '删除通行证', {
            //     confirmButtonText: '删除',
            //     cancelButtonText: '取消',
            //     type: 'warning'}).then(() => {
            //     this.$PassportService.Remove(passport.UserId)
            //         .then(ret => {
            //             if(ret) {
            //                 passport.State = -1; 
            //                 ShowSuccess(`通行证 ${passport.Name}(${passport.TeamNo}) 已经删除。`,'删除通行证');                        
            //             }
            //         });
            // });
        }
    }
}
</script>

<style>

</style>
